import { use, useReducer, useState } from "react";
import axios from "axios";
function App() {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case "changeProList":
          return { ...state, proList: action.payload };
        case "changeBannerList":
          return { ...state, bannerList: action.payload };
        default:
          return state;
      }
    },
    {
      proList: [],
      bannerList: [],
    }
  );
  function getProList() {
    axios.get("http://121.89.205.189:3000/api/pro/list").then((res) => {
      console.log(res.data.data);
      dispatch({ type: "changeProList", payload: res.data.data });
    });
  }

  function getBannerList() {
    axios.get("http://121.89.205.189:3000/api/banner/list").then((res) => {
      console.log(res.data.data);
      dispatch({ type: "changeBannerList", payload: res.data.data });
    });
  }

  return (
    <div>
      <button onClick={() => getProList()}>获取商品列表</button>

      {state.proList.map((item) => (
        <div key={item.proid}>{item.proname}</div>
      ))}

      <button onClick={() => getBannerList()}>获取轮播图列表</button>
      {state.bannerList.map((item) => (
        <div key={item.bannerid}>
          <img src={item.img} style={{ width: "300px"} } alt="" />
        </div>
      ))}
    </div>
  );
}

export default App;
